<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="close"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1" @change="onChange">
        <a-tab-pane key="1" tab="漫入告警">
          <a-form-model
            ref="formRef"
            :model="dataForm"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            class="layout-inline"
          >
            <div class="in-box">
              <a-form-model-item :wrapper-col="{ span: 24 }">
                <custom-table
                  ref="table"
                  rowKey="masterId"
                  :showAlert="false"
                  :showSelection="true"
                  :loading="loading"
                  :columns="columns"
                  :dataSource="pageData"
                  @selectedRow="onSelectedRow1"
                  @change="onTableChange1"
                />
              </a-form-model-item>
            </div>
            <div class="in-box" style="padding-top:10px;flex:1;">
              <a-form-model-item label="漫入区域">
                <a-select mode="multiple" placeholder="选择区域" v-model="dataForm.regionId">
                  <a-select-option v-for="(item, i) in dictOptions" :key="i" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-form-model>
        </a-tab-pane>
        <a-tab-pane key="2" tab="漫出告警">
          <a-form-model
            ref="formRef"
            :model="dataForm"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            class="layout-inline"
          >
            <div class="in-box">
              <a-form-model-item :wrapper-col="{ span: 24 }">
                <custom-table
                  ref="table"
                  rowKey="masterId"
                  :showAlert="false"
                  :showSelection="true"
                  :loading="loading"
                  :columns="columns"
                  :dataSource="pageData"
                  @selectedRow="onSelectedRow2"
                  @change="onTableChange2"
                />
              </a-form-model-item>
            </div>
            <div class="in-box" style="padding-top:10px;flex:1;">
              <!--//漫出告警-->
              <a-form-model-item label="漫开区域">
                <a-select mode="multiple" placeholder="选择区域" v-model="dataForm.regionId">
                  <a-select-option v-for="(item, i) in dictOptions" :key="i" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-form-model>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <template slot="footer">
      <a-button key="back" @click="close">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
    </template>
  </j-modal>
</template>

<script>
import * as alarmApi from '@/api/xlgc/alarmCenter.js'
import * as areaEvent from '@/api/xlgc/areaEvent.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  name: 'RuleModal',
  components: {
    CustomTable
  },
  props: {
    taskId: {
      type: [String, Number]
    },
    modelId: {
      type: [String, Number]
    },
    approvalId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      title: '告警规则',
      visible: false,
      disableSubmit: false,
      dataForm: {
        alarmType: '漫入'
      },
      dictOptions: [],
      selectedKeys: null,
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '告警目标',
          dataIndex: 'name',
          // width: 115,
          align: 'center'
        },
        {
          title: '联系方式',
          dataIndex: 'contactInformation',
          // width: 115,
          align: 'center'
        }
      ],
      pageData: {},
      confirmLoading: false,
      loading: false,
      reloading: true,
      tabIndex: 1
    }
  },
  methods: {
    // tabs切换
    onChange(e) {
      if (e === '1') {
        this.tabIndex = 1
        this.dataForm.alarmType = '漫入'
      } else {
        this.tabIndex = 2
        this.dataForm.alarmType = '漫出'
      }
    },
    add() {
      this.visible = true
      this.$nextTick(() => {
        this.refreshTable()
        this.getPageListByUnit()
      })
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {})
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    // 目标人群列表切换分页
    onTableChange1(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onTableChange2(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    // 获取目标人群列表
    refreshTable() {
      this.loading = true
      alarmApi
        .warningUser(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 获取区域列表
    getPageListByUnit() {
      areaEvent
        .getPageListByUnit({ regionType: 1, pageNo: 1, pageSize: 99999 }) // 告警区域regionType为1
        .then(res => {
          if (res.success) {
            let result = res.result.records
            this.dictOptions = result.map(v => {
              return {
                label: v.name,
                value: v.id
              }
            })
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 选择目标人群列表
    onSelectedRow1(datas) {
      if (!datas || datas.length === 0) return
      let arr = []
      datas.forEach(item => {
        arr.push(item.masterId)
      })
      this.dataForm.ids = arr
      console.log(this.dataForm)
    },
    onSelectedRow2(datas) {
      if (!datas || datas.length === 0) return
      let arr = []
      datas.forEach(item => {
        arr.push(item.masterId)
      })
      this.dataForm.ids = arr
      console.log(this.dataForm)
    },
    // 提交保存
    handleOk() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          let api
          // if (this.configKeys) {
          //   //更新配置
          //   api = alarmApi.updateAlarmRule(this.dataForm)
          // } else {
          // 创建配置
          api = alarmApi.addAlarmRule(this.dataForm)
          // }
          api
            .then(res => {
              if (res.success) {
                let message = res.message ? res.message : '操作成功'
                this.$message.success(message)
                this.visible = false
                this.$emit('ok')
              } else {
                this.$message.warn(res.message)
              }
            })
            .catch(e => {
              this.$message.warn('操作失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    }
  }
}
</script>
<style lang="less" scoped>
.input {
  width: 90px;
  margin: 0 6px;
}
.select {
  width: 120px;
  margin: 0 10px;
}
.layout-inline {
  display: flex;
  .in-box {
    flex: 1;
    &:nth-of-type(1) {
      flex: 0 0 550px;
      border-right: 1px solid #e8e8e8;
      padding-left: 10px;
      padding-right: 10px;
    }
    &:nth-of-type(2) {
      flex: 0 0 290px;
      // border-right: 1px solid #e8e8e8;
    }
  }
}
/deep/.ant-table-thead > tr > th,
/deep/.ant-table-tbody > tr > td {
  padding-left: 0;
  padding-right: 0;
}
/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/.ant-table-tbody > tr > td:first-child {
  padding-left: 10px;
}
/deep/.ant-modal-body {
  padding: 0;
}
</style>
